<!DOCTYPE html>
<html layout:decorate="~{layout}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>

    <title th:text="#{screen.pm.reset.title}">Reset Password Verify Questions View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main class="container mt-3 mb-3" role="main">
    <div class="mdc-card" layout:fragment="content">
        <div class="p-4">
            <h2 th:utext="#{screen.pm.reset.qstitle}">Answer Security Questions</h2>
            <p th:utext="#{screen.pm.reset.qsmsg(${username})}">Welcome <strong>{0}</strong>. Before you can reset
                your password, you must answer the following security questions.</p>
        </div>
        <form id="fm1" method="post">
            <div class="p-4">
                <input name="execution" th:value="${flowExecutionKey}" type="hidden"/>
                <input name="_eventId" type="hidden" value="submit"/>
                <input name="username" th:value="${username}" type="hidden"/>
                <input name="token" th:value="${token}" type="hidden"/>

                <div class="mdc-data-table p-4">
                    <table class="mdc-data-table__table w-100" th:if="${questionsEnabled}">
                        <tbody class="mdc-data-table__content">
                        <tr class="mdc-data-table__header-row" th:each="q,iterStat : ${questions}">
                            <td class="mdc-data-table__cell" th:text="${q}">Question text</td>
                            <td class="mdc-data-table__cell">
                                <div class="mdc-text-field ">
                                    <input class="mdc-text-field__input" required size="45"
                                           th:name="${'q' + iterStat.index}" type="password"/>
                                    <label class="mdc-floating-label" for="username"
                                           th:utext="#{screen.pm.reset.answer(${iterStat.count})}">Answer</label>
                                </div>
                            </td>
                        </tr>
                        <tr class="mdc-data-table__header-row">
                            <td class="mdc-data-table__cell"></td>
                            <td class="mdc-data-table__cell">
                                <button
                                        accesskey="s"
                                        class="mdc-button mdc-button--raised mdc-card__action mdc-card__action--button mr-2"
                                        th:attr="data-processing-text=#{screen.welcome.button.loginwip}"
                                        th:value="#{screen.pm.button.submit}" type="submit" value="SUBMIT">
                                            <span class="mdc-button__label"
                                                  th:text="#{screen.pm.button.submit}">SUBMIT</span>
                                </button>
                            </td>
                        </tr>
                        </tbody>

                    </table>
                </div>
            </div>
        </form>
    </div>
</main>
</body>

</html>